<template>
  <view class="card">
    <view class="title_box">
      <view> 四单管理统计(汇总)</view>
    </view>
    <view class="table_box">
      <uni-table emptyText="暂无更多数据" :stripe="true">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th width="140rpx" align="left"
            ><text class="table_th">四单动作</text></uni-th
          >
          <uni-th width="60rpx" align="left"><text class="table_th">目标</text></uni-th>
          <uni-th width="60rpx" align="left"><text class="table_th">实际</text></uni-th>
          <uni-th width="60rpx" align="left"><text class="table_th">差距</text></uni-th>
          <uni-th width="60rpx" align="left"><text class="table_th">昨日</text></uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr
          v-for="(item, index) in tableData"
          :key="index"
          :class="index % 2 === 0 ? 'even-row' : 'odd-row'"
        >
          <uni-td
            ><text class="table_td">{{ item.name }}</text>
          </uni-td>
          <uni-td
            ><text class="table_td">{{ item.target }}</text>
          </uni-td>
          <uni-td
            ><text class="blue table_td">{{ item.actual }}</text>
          </uni-td>
          <uni-td
            ><text class="table_td">{{ item.gap }}</text>
          </uni-td>
          <uni-td
            ><text class="blue table_td">{{ item.yesterday }}</text>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [
        {
          name: "锁单",
          target: "50",
          actual: "47",
          gap: "-3",
          yesterday: "47",
        },
        {
          name: "跟单",
          target: "20",
          actual: "0",
          gap: "-20",
          yesterday: "-0",
        },
        {
          name: "跟单",
          target: "20",
          actual: "0",
          gap: "-20",
          yesterday: "-0",
        },
        {
          name: "跟单",
          target: "20",
          actual: "0",
          gap: "-20",
          yesterday: "-0",
        },
      ],
    };
  },
  computed: {},
  methods: {},
  onShow() {},
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>

<style lang="scss" scoped>
.card {
  padding: 24rpx;
  background: #fff;
  border-radius: 18rpx;
  box-sizing: border-box;
  margin-top: 24rpx;

  .title_box {
    font-size: 28rpx;
    font-weight: bolder;
    color: #1c1b26;
    margin-bottom: 24rpx;
  }
}
.blue {
  color: #3c99fd;
}
.table_box {
  .table_th {
    font-size: 22rpx;
    color: #9ea5b2;
  }
  .table_td{
    font-size: 24rpx;
  }
}
</style>
